<template>
	<div class="confirm-dialog-wrap">
		<div class="bg-cover"></div>
		<div class="confirm-dialog-inner-wrap">
			<slot name="header"><div class="confirm-dialog-header">提示<i class="close-icon"></i></div></slot>
			<slot name="content"></slot>
			<div class="confirm-dialog-foot-wrap">
				<slot name="footbtn"></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'ConfirmDialog'
	}
</script>

<style lang='scss'>
	.confirm-dialog-wrap{
		position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
		.confirm-dialog-inner-wrap{
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			margin: auto;
			width: 19.37rem;
			padding-top: 1.87rem;
			transform: translateY(-50%);
			border-radius: 0.5rem;
			background-color: #fff;
			.confirm-dialog-header{
				position: relative;
				font-size: 1.25rem;
				font-weight: 600;
				color: #1D1E2C;
				text-align: center;
				.close-icon{
					position: absolute;
					right: 1.43rem;
					top: -0.62rem;
					width: 1.12rem;
					height: 1.12rem;
					background: url(../../assets/images/private-chat-close-icon.png) no-repeat;
					background-size:contain;
				}
			}
		}
	}
	.confirm-dialog-wrap{
		.confirm-dialog-inner-wrap{
			.content{
				padding: 0.87rem 1.5rem 1.37rem;
				font-size: 0.93rem;
				color: #1D1E2C;
				line-height: 1.5rem;
			}
			.foot-btn-wrap{
				border-top: 1px solid #ddd;
				a{
					flex: 1;
					text-align: center;
					line-height: 3.12rem;
					font-size: 1rem;
				}
				.application-btn-a{
					border-left: 1px solid #ddd;
					color: #4360F0;
				}
			}
		}
	}
</style>
